<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>标签选择器</title>
	</head>
	<script type="text/javascript" src="jquery-3.1.4.js"></script>
	<style type="text/css">
		#div_box{
			width: 200px;
			height: 200px;
			border: solid 1px black;
			background: red;
		}
		
		.box{
			width: 200px;
			height: 200px;
			border: solid 2px black;
			background: blue;
		}
		
	</style>
	<body>
		<input class="a1" type="button" id="box1" name="box"  value="对象" />
		<div id="div_box">
			
		</div>
		<div class="box" >
			
		</div>
		<div class="box">
			
		</div>
		<input class="a2" type="button" id="box2" name="box2"  value="class为box的两个div方格实现上下拉特效"/>

		<span>China</span>
		
		<script type="text/javascript">
			
			// 基本选择器
			var inputEle1 = $("#box1");// 等价于document.getElementById("box1"); 获取id上一级的标签名
			alert(inputEle1.val()); 
			
			var inputEle2 = $("input");// 等价于document.getElementByTagName("input"); 获取标签同级名
			alert(inputEle2.val()); 
			
			var inputEle3 = $(".a1");// 等价于 通过class来获取DOM对象
			alert(inputEle3.val());
			
			//  DOM 获取方法有用本身 document 或者  JQuery方法 ,但是JQuery 下获取的DOM对象是有被JQuery包装过的
				
			//  将 JQuery 和   原生DOM 对象进行相互转换
			//  jquery 转 DOM
			var $inEle1 = $("#box1");
			var inEle1 = $inEle1.get(0);// JQuery 转 DOM 输出 或者 inEle1[0] 说明JQuery底层是一个数组
			alert(inEle1.id);// DOM对象输出
			alert($inEle1.id);// JQuery对象输出
			alert("分开");
			//  DOM 转 jquery
			var inEle2 = document.getElementById("box1");
			alert(inEle2.id); 
			var $inEle2 = $(inEle2).get(0);// DOM对象转换为JQuery对象
			alert($inEle2.id); 
			
			// 样式方法
			// 按钮响应
			var $button = $("#box1");
			$button.click(function(){
				alert("红色变黄色啦");
				var $div_box_css = $("#div_box");
				// jquery下的css样式类库
				$div_box_css.css("background","yellow");
			});
			// 滑动效果实现,收缩相同标签
			var $button2 = $("#box2");
			$button2.click(function(){
				$(".box").slideToggle();
			})
			// jquery通过标签作用————基本标签选择器
			var $span = $("span");
			$span.click(function(){
				alert("span点击函数 作用啦");
			})
		</script>
	</body>
</html>
